<template>
  <view class="box">
    <dao title="报修系统" color="#fff" :left="true" />
    <!-- <quan v-if="true" /> -->

   <view class="sdsdax">
    <uni-forms
        :border="true"
        ref="valiForm"
        :rules="data.rules"
        :modelValue="valiFormData"
      >
        <uni-forms-item label="店名" name="name">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
            v-model="valiFormData.name"
            placeholder="请输入店名"
          />
        </uni-forms-item>
        <uni-forms-item label="姓名" name="myname">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
            v-model="valiFormData.myname"
            placeholder="请输入姓名"
          />
        </uni-forms-item>
        
        <uni-forms-item label="电话" name="phone">
          <uni-easyinput
            :inputBorder="false"
            :clearable="false"
            v-model="valiFormData.phone"
            placeholder="请输入电话"
          >
            <!-- <template #right>
              <view style="color: #93b4da">获取验证码</view>
            </template> -->
          </uni-easyinput>
        </uni-forms-item>

        <uni-forms-item label="所在地区" name="address">
          <!-- <uni-data-picker
          :preload="true"
          placeholder="请选择所在地区"
           popup-title="请选择所在地区" :localdata="dataTree"
            v-model="data.valiFormData.address"
				@change="onchange" @nodeclick="onnodeclick">
			</uni-data-picker> -->


  <view   style=" 
 ">

<view style="
margin-top: 20rpx;
width: 93%;
display: flex;
padding: 0 20rpx;
flex-direction: row-reverse;
align-items: center;
" @click="open">
<text v-if="valiFormData.address">{{ valiFormData.address }}</text>
<text style="font-size: 22rpx; color: #999;" v-else>
  请选择所在地区
</text></view>
        
        
        <cityPicker :column="3" :default-value="sdf" 
        :mask-close-able="false" @confirm="confirm" @cancel="cancel" 
        :visible="visible"/>
    

  </view>
        </uni-forms-item>


        <uni-forms-item label="详细地址" name="detail">
          <uni-easyinput
            :clearable="false"
            :inputBorder="false"
            :styles="data.styles"
            v-model="valiFormData.detail"
            placeholder=""
          >
            <template #right>
              <view @click="loginw">
                <uni-icons
                  style="margin-right: -2px"
                  type="location-filled"
                  size="29"
                  color="#3280fe"
                ></uni-icons>
              </view> </template
          ></uni-easyinput>
        </uni-forms-item>


        <uni-forms-item  name="mingpai">


          <view class="example-body">
            <view style="font-size: 26rpx;
    color: #606266; margin-bottom: 30rpx;"> 设备铭牌照片  <text @click="show=true" style="color: red;">查看样图</text>
  	<view  style="font-size:20rpx;color: #999;margin-top: 5rpx;">
      若无铭牌信息可拍摄设备图片
    </view>  
  </view>
	
    <upload 
    @updeteData="mingpaiupdeteData"
    :uploadText="'上传铭牌'"
     :maxCount="2"
    
    />
			</view>


        </uni-forms-item>

        <uni-forms-item label="报修项目"  name="weixu">
          <uni-data-select
        v-model="valiFormData.weixu"
        :localdata="range"
      ></uni-data-select>



</uni-forms-item>

<uni-forms-item label="报修产品"  name="IotProductName">
          <uni-data-select
        v-model="valiFormData.IotProductName"
        :localdata="rangse"
        @change="chasnge"
      ></uni-data-select>



</uni-forms-item>



<uni-forms-item   name="introduction">
  <view class="example-body">
            <view style="font-size: 26rpx;
    color: #606266; margin-bottom: 40rpx;"> 故障描述  
    </view>
		
 
			</view>
  <uni-easyinput type="textarea" v-model="valiFormData.introduction"
   placeholder="请输入故障描述" />

<view style="display: flex;">
  <upload
    @updeteData="guzhangupdeteData"
    :uploadText="tilv"
     :maxCount="6"
    
    />
    <upload 
    @updeteData="guzhangvpdeteData"
    :accept="'video'"
    :uploadText="'上传视频'"
     :maxCount="1"
    
    />
</view>
</uni-forms-item>

      </uni-forms>

<view @click="dianhua" style="height: 80rpx; width: 100%;
border:1px solid #999;
display: flex;
justify-content: space-between;align-items: center;
padding: 40rpx;box-sizing: border-box;
border-radius: 20rpx;
margin: 20rpx 0;
">

<text>人工报修电话：{{ all }}</text> 

<image style="width: 40rpx;height: 40rpx;" src="../../static/电话 (1).png" mode="aspectFit|aspectFill|widthFix" lazy-load="false" binderror="" bindload="">
  
</image></view>

      <uv-overlay :show="show" @click="show = false">
        <view class="warp">
          <image  @tap.stop
        src="../../static/IMG_20241229_101538(1)(1).jpg"
        mode="scaleToFill"
      />
		</view>
     </uv-overlay>

     
     <button 
    
     :disabled="ddds"
        style="border: 0;width: 100%;" :plain="true"
      
         class="brn" 
         @click="submit">

        提交
        </button>
     <view style="height: 46rpx;"></view>


   </view>
  </view>
</template>

<script setup >
import {xinzengshouhou} from '../../api/login'
import upload from '../../components/upload.vue'
import dao from "../../pages/conpments/daohang.vue";
import cityPicker from '@/uni_modules/piaoyi-cityPicker/components/piaoyi-cityPicker/piaoyi-cityPicker'
import {
    onLoad,
    onShow,onHide
  } from "@dcloudio/uni-app";

 
import { useCounterStore } from "../../stores/counter";
import {
  ref,
  onMounted,
  inject,
  getCurrentInstance,
  reactive,
  computed,
} from "vue";
 import { QQMapWX} from '../../common/qqmap-wx-jssdk'
 const dianhua=()=>{
  uni.makePhoneCall({
	phoneNumber:all.value //仅为示例
});
 }
// let QQMapWX= require('../../common/qqmap-wx-jssdk')
const getlion=(location)=>{
  const qqmapsdk = new QQMapWX({
    // SVEBZ-LJ3KJ-2XTFZ-DKE2X-P4F4J-74BJI
							key: 'SVEBZ-LJ3KJ-2XTFZ-DKE2X-P4F4J-74BJI'
						});

						qqmapsdk.reverseGeocoder({
							location,
							success(response) {
								let info = response.result;
          
                sdf.value=info.ad_info.adcode
                valiFormData.address=info.address_component.province+info.address_component.city+info.address_component.district
             
						
							},
              fail(e){
                console.log(e);
              }
						})

}

const all=ref('')
const chasnge=(e)=>{
if(e=='智能回台/新干线皮带'){
  all.value='18676888171'
}
if(e=='智能机'){
  all.value='18998497443'
}
if(e=='传送小车'){
  all.value='13420106361'
}
  console.log(e);
}
const ddds =ref(false)
const loginw = () => {

  
  
  let location = {
					longitude: 0,
					latitude: 0,
					province: "",
					city: "",
					area: "",
					street: "",
					address: "",
				};
  uni.getSetting({
    success(res) {
   

      if (!res.authSetting["scope.userLocation"]) {
        uni.authorize({
          scope: "scope.userLocation",
          success() {
        
            uni.chooseLocation({
              success: function (res) {

                if (res.name) {
                  valiFormData.detail=res.name
                  location.longitude=res.longitude
                  location.latitude = res.latitude
            //  valiFormData.position = res.address ;
            //  valiFormData.address=res

            getlion(location)
            }
              },
            });
        
          },
          fail() {
            uni.showModal({
              title: "提示",
              content: "您未授权地理位置功能",
              cancelText: "不授权",
              cancelColor: "#999",
              confirmText: "授权",
              confirmColor: "#3280fe",
              success(res) {
                if (res.confirm) {
                  // 选择弹框内授权
                  uni.openSetting({
                    success(res) {
                    },
                  });
                } else if (res.cancel) {
                  // 选择弹框内 不授权
                  console.log("用户点击不授权");
                }
              },
            });
          },
        });
      } else {
      
        uni.chooseLocation({
          success: function (res) {

            if (res.name) {
              valiFormData.detail=res.name

              location.longitude=res.longitude
                  location.latitude = res.latitude
              getlion(location)
            }
          },
        });
      }
    },
  });
};






const counter = useCounterStore();
// 一个计算属性 ref
const token = computed(() => {
  return counter.token;
});

// 一个计算属性 ref
const classes = computed(() => {
  return counter.address;
});

let tilv =ref('上传图片')
const guzhangupdeteData=(e)=>{
  valiFormData.guzhang=e
 if(!valiFormData.guzhang.length){
  tilv.value='上传图片'

 }else{
  tilv.value='还可上传'+(6-valiFormData.guzhang.length)+'张'

 }
}
const guzhangvpdeteData=(e)=>{
  valiFormData.guzhangv=e
}

const mingpaiupdeteData=(e)=>{

if(e.length){
  valiFormData.mingpai=e

}

}

const handleTree =(data, parent_code = null)=> {
				let res = []
				
				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',
					
					text: 'name',
					value: 'name'
				}
				
				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}
				
				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty( keys.pid ) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = handleTree(data, data[index][keys.id])
							res.push(oneItem)
						} 
					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty( keys.pid ) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]
							
							// 递归下去
							oneItem.children = handleTree(data, data[index][keys.id])
							res.push(oneItem)
							
						}
					}
				}
				return res
			}
// 省市区数据树生成

 
 

console.log();


const onnodeclick=()=>{}
const onchange=()=>{}
const visible=ref(false)
const open=()=>{
  visible.value=true
}
const sdf=ref('440111')

const confirm=(val)=>{
  console.log(val)
            visible.value = false
            sdf.value=val.code
           
 valiFormData.address=val.name


}
const cancel=()=>{
  visible.value = false
}
const show=ref(false)
const   valiFormData=reactive({
    name: "",
    myname:'',
    phone: "",
    introduction: "",
    address:'',
    IotProductName:'',
    detail:'',
    mingpai:[],
    weixu:'',
    introduction:'',
    guzhang:[],
    guzhangv:[]
  })


const mingpaixuanze=(e)=>{console.log(e);}

const  range= [
          { value: '保养维护', text: "保养维护" },
          { value: '故障报修', text: "故障报修" },
        ]
        const  rangse= [
          { value: '智能机', text: "智能机" },
          { value: '智能回台/新干线皮带', text: "智能回台/新干线皮带" },
          { value: '传送小车', text: "传送小车" },
        
        ]
const data = reactive({
  // 校验表单数据


  rules: {
    IotProductName:{
      rules: [
        {
          required: true,
          errorMessage: "请选择物品",
        },
      
      ],
    },
    myname:{
      rules: [
        {
          required: true,
          errorMessage: "姓名不能为空",
        },
      
      ],
    },
    introduction:{
      rules: [
        {
          required: true,
          errorMessage: "故障描述不能为空",
        },
      
      ],
    },
    weixu:{
      rules: [
        {
          required: true,
          errorMessage: "项目不能为空",
        },
      
      ],
    },
    // mingpai:{
    //   rules: [
    //     {
    //       required: true,
    //       errorMessage: "铭牌不能为空",
    //     },
      
    //   ],
    // },
    name: {
      rules: [
        {
          required: true,
          errorMessage: "店名不能为空",
        },
      
      ],
    },
    detail: {
      rules: [
        {
          required: true,
          errorMessage: "详细地址不能为空",
        },
       
      ],
    },
    address: {
      rules: [
        {
          required: true,
          errorMessage: "区域不能为空",
        },
       
      ],
    },
    phone: {
      rules: [
        {
          required: true,
          errorMessage: "手机号不能为空",
        },
        {
          pattern: /^1\d{10}$|^(0\d{2,3}-?|\(0\d{2,3}\))?[1-9]\d{4,7}(-\d{1,8})?$/,
          errorMessage: "手机号格式有误！",
        },
      ],
    },
  },
});




const valiForm = ref(null);

const submit = () => {
  valiForm
    .value.validate()
    .then((res) => {
      console.log("success", res);
    let aa=  {
  "IotID": 2,
  IotProductItem:'',
  "IotIDTagFilepath": [],
  "IotIDFaultDescription": "",
  "IotIDFaultDescriptionFilepath": [],
  "StoreName": "",
  "StoreAddress": "",
  "StoreDetailAddress": "",
  "ContactName": "",
  "ContactPhone": "",
  "IsWarranty": "",
  "Status": "待审核",
  "Suggestions": "",
  SuggestionsFilepath:[]
}
aa.IotIDTagFilepath=valiFormData.mingpai.map(item=>item.url)
aa.IotIDFaultDescription=valiFormData.introduction
aa.IotIDFaultDescriptionFilepath=(valiFormData.guzhang.map(item=>item.url).concat(valiFormData.guzhangv.map(item=>item.url)))
aa.StoreName=valiFormData.name
aa.StoreAddress=valiFormData.address
aa.StoreDetailAddress=valiFormData.detail
aa.ContactName=valiFormData.myname
aa.ContactPhone=valiFormData.phone
aa.IotProductName=valiFormData.IotProductName
aa.IotProductItem=valiFormData.weixu
ddds.value=true
xinzengshouhou(aa).then((result) => {


  uni.showToast({
        title: `提交成功！`,
        duration:1000,
        success:()=>{
         
  setTimeout(()=>{
  
    ddds.value=false
    uni.navigateBack({
    delta: 1,
  });
  },1000)
        }
      });
})

      // uni.navigateTo({
      //   url: "/pages/my/Reset/index",
      // });
    })
    .catch((err) => {
      console.log("err", err);
    });
};

const shenf=()=>{
  if (!token.value) {
    uni.switchTab({
						url: "/pages/my/index",
					  });
    // uni.hideTabBar();
  }else{
    uni.navigateTo({
      url: `/subpkg/shouhou/index`,

    });
  }
}






onShow(async ()=>{


 
})


</script>

<style scoped lang="scss">
.warp {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;
	}
.ferf{text-align: right;

color: #606266;}

.sdsdax{border-radius: 40rpx;

width: 100%;height: 100%;
padding: 40rpx;
margin-top:20rpx;
box-sizing: border-box;
background: rgb(255, 255, 255);}


.uni-body {
  display: flex;
  justify-content: space-between;
  align-items: center;
}
:deep(.uni-forms-item__error){
  text-align: right;
  
}
:deep(.uni-easyinput__content-input){
  text-align: right;
}
:deep(.uni-select__input-placeholder){
  text-align: right;
  color: #606266 !important;
}
:deep(.uni-easyinput__placeholder-class) {
    text-align: right;
    /* 如有需要，可以添加额外的样式，如颜色等 */
}

.box {
  height: 50vh;
  background: linear-gradient(
    180deg,
    $uni-primary 0%,
    rgba(216, 237, 232, 0.43) 61.6%,
    rgba(217, 217, 217, 0) 100%
  );
}


:deep(.input-value-border ){
  border:0;

}

:deep(.selected-area)  {
 flex-direction: row-reverse;

}
:deep(.uni-select){
  border:0;
  text-align: right;
}
::v-deep .uni-card{border-radius: 20rpx;}
:deep(.is-input-border){
  border: 0 !important;
}
::v-deep .brn {
  margin-top: 20rpx;
  width: 100%;
  border-radius: 50rpx;
  color: #fff;
  background-image: linear-gradient(to right, #53c4ff, #40a3ff, #3383fe);

}
</style>